<template>
  <div class="container">
    <div class="watermark">科技园入驻申请表</div>

    <div class="header">
      <h1>桂林电子科技大学科技园</h1>
      <h2>入 园 申 请 表</h2>
      <div class="subtitle-container">
        <div class="subtitle-left">
          <span>申请时间：</span>
          <span class="date-display">{{ form.applicationDate }}</span>
        </div>
        <div class="subtitle-right">
          （适用于新成立企业或非独立注册企业）
        </div>
      </div>
    </div>

    <table style="table-layout: fixed;">
      <colgroup>
        <col style="width: 13%">
        <col style="width: 9%">
        <col style="width: 2%">
        <col style="width: 1%">
        <col style="width: 3%">
        <col style="width: 3%">
        <col style="width: 2%">
        <col style="width: 7%">
        <col style="width: 2%">
        <col style="width: 1%">
        <col style="width: 0%">
        <col style="width: 1%">
        <col style="width: 2%">
        <col style="width: 5%">
        <col style="width: 1%">
        <col style="width: 0%">
        <col style="width: 7%">
        <col style="width: 1%">
        <col style="width: 3%">
        <col style="width: 1%">
        <col style="width: 8%">
        <col style="width: 16%">
      </colgroup>

      <tbody>
      <tr>
        <td colspan="22">
          <strong>申请入驻企业名称</strong>：<span>{{form.enterpriseName}} </span><span>（盖章）</span>
        </td>
      </tr>

      <tr>
        <td class="title-cell">企业负责人</td>
        <td colspan="2" class="text-center"><span class="readonly-text">{{ form.legalRepresentative }}</span></td>
        <td colspan="4" class="title-cell">联系电话</td>
        <td colspan="7" class="text-center"><span class="readonly-text">{{ form.contactPhone }}</span></td>
        <td colspan="4" class="title-cell">邮箱地址</td>
        <td colspan="4" class="text-center"><span class="readonly-text">{{ form.contactEmail }}</span></td>
      </tr>

      <tr>
        <td class="title-cell">经办人</td>
        <td colspan="2" class="text-center"><span class="readonly-text">{{ form.agentName }}</span></td>
        <td colspan="4" class="title-cell">联系电话</td>
        <td colspan="7" class="text-center"><span class="readonly-text">{{ form.agentPhone }}</span></td>
        <td colspan="4" class="title-cell">邮箱地址</td>
        <td colspan="4" class="text-center"><span class="readonly-text">{{ form.agentEmail }}</span></td>
      </tr>

      <tr>
        <td class="title-cell">拟注册资本</td>
        <td colspan="13" class="text-center">
          <div class="show-a-line">
            <span class="readonly-text">{{ form.registeredCapital }}</span>
            <span>万元</span>
          </div>
        </td>
        <td colspan="4" class="title-cell">实际募集资金</td>
        <td colspan="4">
          <div class="show-a-line">
            <span class="readonly-text">{{ form.paidInCapital }}</span>
            <span>万元</span>
          </div>
        </td>
      </tr>

      <tr>
        <td class="title-cell">初始员工人数</td>
        <td colspan="13" class="text-center"><span class="readonly-text">{{ form.employeeCount }}</span></td>
        <td colspan="4" class="title-cell">预计注册日期</td>
        <td colspan="4" class="text-center"><span class="readonly-text">{{ form.expectedRegistrationDate }}</span></td>
      </tr>

      <tr>
        <td class="title-cell">企业性质</td>
        <td colspan="21">
          <div class="checkbox-group">
            <div class="checkbox-item disabled">
              <span class="checkbox" :class="{checked: form.enterpriseType.includes('大学生创业企业')}">✓</span>
              <span class="checkbox-label">大学生创业企业</span>
            </div>
            <div class="checkbox-item disabled">
              <span class="checkbox" :class="{checked: form.enterpriseType.includes('高校教师创业企业')}">✓</span>
              <span class="checkbox-label">高校教师创业企业</span>
            </div>
            <div class="checkbox-item disabled">
              <span class="checkbox" :class="{checked: form.enterpriseType.includes('民营企业')}">✓</span>
              <span class="checkbox-label">民营企业</span>
            </div>
            <div class="checkbox-item disabled">
              <span class="checkbox" :class="{checked: form.enterpriseType.includes('外资企业')}">✓</span>
              <span class="checkbox-label">外资企业</span>
            </div>
            <div class="checkbox-item disabled">
              <span class="checkbox" :class="{checked: form.enterpriseType.includes('股份制企业')}">✓</span>
              <span class="checkbox-label">股份制企业</span>
            </div>
            <div class="checkbox-item disabled">
              <span class="checkbox" :class="{checked: form.enterpriseType.includes('国有及国有控股企业')}">✓</span>
              <span class="checkbox-label">国有及国有控股企业</span>
            </div>
            <div class="checkbox-item disabled">
              <span class="checkbox" :class="{checked: form.enterpriseType.includes('其他企业')}">✓</span>
              <span class="checkbox-label">其他企业</span>
            </div>
          </div>
        </td>
      </tr>

      <tr>
        <td class="title-cell">所属行业</td>
        <td colspan="9">
          <div class="checkbox-group">
            <div class="checkbox-item disabled">
              <span class="checkbox" :class="{checked: form.industry.includes('电子信息产业')}">✓</span>
              <span class="checkbox-label">电子信息产业</span>
            </div>
            <div class="checkbox-item disabled">
              <span class="checkbox" :class="{checked: form.industry.includes('生物医学产业')}">✓</span>
              <span class="checkbox-label">生物医学产业</span>
            </div>
            <div class="checkbox-item disabled">
              <span class="checkbox" :class="{checked: form.industry.includes('新能源产业')}">✓</span>
              <span class="checkbox-label">新能源产业</span>
            </div>
            <div class="checkbox-item disabled">
              <span class="checkbox" :class="{checked: form.industry.includes('新材料产业')}">✓</span>
              <span class="checkbox-label">新材料产业</span>
            </div>
            <div class="checkbox-item disabled">
              <span class="checkbox" :class="{checked: form.industry.includes('先进制造产业')}">✓</span>
              <span class="checkbox-label">先进制造产业</span>
            </div>
            <div class="checkbox-item disabled">
              <span class="checkbox" :class="{checked: form.industry.includes('环保节能减排')}">✓</span>
              <span class="checkbox-label">环保节能减排</span>
            </div>
            <div class="checkbox-item disabled">
              <span class="checkbox" :class="{checked: form.industry.includes('高技术服务业')}">✓</span>
              <span class="checkbox-label">高技术服务业</span>
            </div>
            <div class="checkbox-item disabled">
              <span class="checkbox" :class="{checked: form.industry.includes('软件外包服务业')}">✓</span>
              <span class="checkbox-label">软件外包服务业</span>
            </div>
            <div class="checkbox-item disabled">
              <span class="checkbox" :class="{checked: form.industry.includes('其他')}">✓</span>
              <span class="checkbox-label">其他</span>
              <span v-if="form.industry.includes('其他')" class="readonly-text">{{ form.otherIndustry }}</span>
            </div>
          </div>
        </td>
        <td colspan="5" class="title-cell">主营业务</td>
        <td colspan="7"><span class="readonly-text">{{ form.mainBusiness }}</span></td>
      </tr>

      <tr>
        <td class="title-cell">入园业务</td>
        <td colspan="21">
          <div class="checkbox-group">
            <div class="checkbox-item disabled">
              <span class="checkbox" :class="{checked: form.businessScope.includes('研究')}">✓</span>
              <span class="checkbox-label">研究</span>
            </div>
            <div class="checkbox-item disabled">
              <span class="checkbox" :class="{checked: form.businessScope.includes('开发')}">✓</span>
              <span class="checkbox-label">开发</span>
            </div>
            <div class="checkbox-item disabled">
              <span class="checkbox" :class="{checked: form.businessScope.includes('生产')}">✓</span>
              <span class="checkbox-label">生产</span>
            </div>
            <div class="checkbox-item disabled">
              <span class="checkbox" :class="{checked: form.businessScope.includes('销售')}">✓</span>
              <span class="checkbox-label">销售</span>
            </div>
            <div class="checkbox-item disabled">
              <span class="checkbox" :class="{checked: form.businessScope.includes('服务')}">✓</span>
              <span class="checkbox-label">服务</span>
            </div>
            <div class="checkbox-item disabled">
              <span class="checkbox" :class="{checked: form.businessScope.includes('其他')}">✓</span>
              <span class="checkbox-label">其他</span>
              <span v-if="form.businessScope.includes('其他')" class="readonly-text">{{ form.otherBusinessScope }}</span>
            </div>
          </div>
        </td>
      </tr>

      <tr>
        <td rowspan="5" class="title-cell vertical-text">园区场地<br>租赁需求</td>
        <td colspan="3" class="title-cell">租赁面积</td>
        <td colspan="8">
          <div class="show-a-line">
            <span class="readonly-text">{{ form.rentalArea }}</span>
            <span>平方米</span>
          </div>
        </td>
        <td colspan="5" class="title-cell">位置要求</td>
        <td colspan="5"><span class="readonly-text">{{ form.locationRequirement }}</span></td>
      </tr>

      <tr>
        <td colspan="3" class="title-cell">租期</td>
        <td colspan="8">
          <div class="show-a-line">
            <span class="readonly-text">{{ form.leaseTerm }}</span>
            <span>年</span>
          </div>
        </td>
        <td colspan="5" class="title-cell">楼层要求</td>
        <td colspan="5"><span class="readonly-text">{{ form.floorRequirement }}</span></td>
      </tr>

      <tr>
        <td colspan="3" class="title-cell">电力要求</td>
        <td colspan="8"><span class="readonly-text">{{ form.powerRequirement }}</span></td>
        <td colspan="5" class="title-cell">给排水要求</td>
        <td colspan="5"><span class="readonly-text">{{ form.waterRequirement }}</span></td>
      </tr>

      <tr>
        <td colspan="3" class="title-cell">网络要求</td>
        <td colspan="18"><span class="readonly-text">{{ form.networkRequirement }}</span></td>
      </tr>

      <tr>
        <td colspan="3" class="title-cell">其他要求</td>
        <td colspan="18"><span class="readonly-text">{{ form.otherRequirements }}</span></td>
      </tr>

      <tr>
        <td rowspan="10" class="title-cell vertical-text">股东构成</td>
        <td colspan="8" class="title-cell">股东姓名或名称</td>
        <td colspan="8" class="title-cell">股份比例</td>
        <td colspan="5" class="title-cell">股东性质</td>
      </tr>

      <tr v-for="(shareholder, index) in form.shareholders" :key="index">
        <td colspan="8" class="text-center"><span class="readonly-text">{{ shareholder.name }}</span></td>
        <td colspan="8" class="text-center"><span class="readonly-text">{{ shareholder.ratio }}</span></td>
        <td colspan="5" class="text-center"><span class="readonly-text">{{ shareholder.type }}</span></td>
      </tr>

      <tr>
        <td rowspan="8" class="title-cell vertical-text">主要人员简介</td>
        <td class="title-cell">姓名</td>
        <td colspan="7" class="title-cell">出生年月</td>
        <td colspan="2" class="title-cell">职务</td>
        <td colspan="6" class="title-cell">毕业院校</td>
        <td colspan="3" class="title-cell">职称</td>
        <td class="title-cell">学历</td>
        <td class="title-cell">专业</td>
      </tr>

      <tr v-for="(person, index) in form.keyPersonnel" :key="index">
        <td><span class="readonly-text">{{ person.name }}</span></td>
        <td colspan="7"><span class="readonly-text">{{ person.birthDate }}</span></td>
        <td colspan="2"><span class="readonly-text">{{ person.position }}</span></td>
        <td colspan="6"><span class="readonly-text">{{ person.graduation }}</span></td>
        <td colspan="3"><span class="readonly-text">{{ person.title }}</span></td>
        <td colspan="1"><span class="readonly-text">{{ person.education }}</span></td>
        <td colspan="1"><span class="readonly-text">{{ person.major }}</span></td>
      </tr>

      <tr>
        <td rowspan="7" class="title-cell vertical-text">入园项目简介</td>
        <td colspan="4">项目简介</td>
        <td colspan="17"><span class="readonly-textarea">{{ form.projectDescription }}</span></td>
      </tr>

      <tr>
        <td colspan="4">竞争优势分析</td>
        <td colspan="17"><span class="readonly-textarea">{{ form.competitiveAnalysis }}</span></td>
      </tr>

      <tr>
        <td colspan="4">市场前景分析</td>
        <td colspan="17"><span class="readonly-textarea">{{ form.marketAnalysis }}</span></td>
      </tr>

      <tr>
        <td colspan="4">能耗情况</td>
        <td colspan="17"><span class="readonly-textarea">{{ form.energyConsumption }}</span></td>
      </tr>

      <tr>
        <td colspan="4">污染情况</td>
        <td colspan="17"><span class="readonly-textarea">{{ form.pollution }}</span></td>
      </tr>

      <tr>
        <td colspan="4">噪声情况</td>
        <td colspan="17"><span class="readonly-textarea">{{ form.noise }}</span></td>
      </tr>

      <tr>
        <td colspan="4">其他情况</td>
        <td colspan="17"><span class="readonly-textarea">{{ form.otherConditions }}</span></td>
      </tr>

      <tr>
        <td rowspan="7" class="title-cell vertical-text">知识产权情况</td>
        <td colspan="5" class="title-cell">名称</td>
        <td colspan="7" class="title-cell">类别</td>
        <td colspan="6" class="title-cell">申请时间</td>
        <td colspan="3" class="title-cell">批准时间</td>
      </tr>

      <tr v-for="(ip, index) in form.intellectualProperties" :key="index">
        <td colspan="5" class="text-center"><span class="readonly-text">{{ ip.name }}</span></td>
        <td colspan="7" class="text-center"><span class="readonly-text">{{ ip.type }}</span></td>
        <td colspan="6" class="text-center"><span class="readonly-text">{{ ip.applicationDate }}</span></td>
        <td colspan="3" class="text-center"><span class="readonly-text">{{ ip.approvalDate }}</span></td>
      </tr>

      <tr>
        <td class="title-cell vertical-text">科技园意见</td>
        <td colspan="21">
          <span class="readonly-textarea">{{ form.parkOpinion }}</span>
          <div style="text-align: right; width:100%; margin-top: 10px; margin-right: 20px;"><span class="readonly-text">{{ form.parkOpinionDate }}</span></div>
        </td>
      </tr>

      <tr>
        <td class="title-cell">备注</td>
        <td colspan="21"><span class="readonly-text">{{ form.remarks }}</span></td>
      </tr>
      </tbody>
    </table>

    <div class="tip-box">
      <p><strong>注：</strong>请同时提供营业执照、法人身份证、上年度财务报表、知识产权证明材料复印件。教师企业请提供教师资格证复印件；学生企业请提供学生证或毕业证复印件；校友企业请提供毕业证复印件。</p>
    </div>

    <div class="print-controls">
      <button class="print-btn" @click="printForm">打印申请表</button>
      <p class="print-tip">打印前请确保：1. 浏览器设置中启用了背景图形打印 2. 纸张方向为纵向 3. 页边距设置为默认</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, onMounted, nextTick } from 'vue';
import { ElMessage } from 'element-plus';
import { useRoute } from 'vue-router';
import { getEnterpriseApplicationDetail } from '@/api/enterpeise';
import type { AjaxResult } from '@/types/resultTypes';

const route = useRoute();

// 映射到 reactive form 对象
const form = reactive({
  applicationDate: '',
  enterpriseName: '',
  legalRepresentative: '',
  contactPhone: '',
  contactEmail: '',
  agentName: '',
  agentPhone: '',
  agentEmail: '',
  registeredCapital: '',
  paidInCapital: '',
  employeeCount: '',
  expectedRegistrationDate: '',
  establishmentDate: '',
  enterpriseType: [] as string[],
  industry: [] as string[],
  otherIndustry: '',
  mainBusiness: '',
  businessScope: [] as string[],
  otherBusinessScope: '',
  rentalArea: '',
  locationRequirement: '',
  leaseTerm: '',
  floorRequirement: '',
  powerRequirement: '',
  waterRequirement: '',
  networkRequirement: '',
  otherRequirements: '',
  shareholders: [
    { name: '', ratio: '', type: '' },
    { name: '', ratio: '', type: '' },
    { name: '', ratio: '', type: '' },
    { name: '', ratio: '', type: '' },
    { name: '', ratio: '', type: '' },
    { name: '', ratio: '', type: '' },
    { name: '', ratio: '', type: '' },
    { name: '', ratio: '', type: '' },
    { name: '', ratio: '', type: '' }
  ],
  keyPersonnel: [
    { name: '', birthDate: '', position: '', graduation: '', title: '', education: '', major: '' },
    { name: '', birthDate: '', position: '', graduation: '', title: '', education: '', major: '' },
    { name: '', birthDate: '', position: '', graduation: '', title: '', education: '', major: '' },
    { name: '', birthDate: '', position: '', graduation: '', title: '', education: '', major: '' },
    { name: '', birthDate: '', position: '', graduation: '', title: '', education: '', major: '' },
    { name: '', birthDate: '', position: '', graduation: '', title: '', education: '', major: '' },
    { name: '', birthDate: '', position: '', graduation: '', title: '', education: '', major: '' }
  ],
  projectDescription: '',
  competitiveAnalysis: '',
  marketAnalysis: '',
  energyConsumption: '',
  pollution: '',
  noise: '',
  otherConditions: '',
  intellectualProperties: [
    { name: '', type: '', applicationDate: '', approvalDate: '' },
    { name: '', type: '', applicationDate: '', approvalDate: '' },
    { name: '', type: '', applicationDate: '', approvalDate: '' },
    { name: '', type: '', applicationDate: '', approvalDate: '' },
    { name: '', type: '', applicationDate: '', approvalDate: '' },
    { name: '', type: '', applicationDate: '', approvalDate: '' }
  ],
  parkOpinion: '',
  parkOpinionDate: '',
  remarks: ''
});

// 定义填充表单的函数
const fillForm = (apiData: any) => {

  // 1. 直接映射的字段
  form.applicationDate = formatDate(apiData.applyDate) || '';
  form.enterpriseName = apiData.itemName || '';
  form.legalRepresentative = apiData.contactName || '';
  form.contactPhone = apiData.contactPhone || '';
  form.contactEmail = apiData.contactEmail || '';
  form.agentName = apiData.agentName || '';
  form.agentPhone = apiData.agentPhone || '';
  form.agentEmail = apiData.agentEmail || '';
  form.registeredCapital = apiData.registerMoney?.toString() || '';
  form.paidInCapital = apiData.raisedMoney?.toString() || '';
  form.employeeCount = apiData.initialEmployees?.toString() || '';
  form.expectedRegistrationDate = formatDate(apiData.expectedRegisterDate) || '';
  form.establishmentDate = formatDate(apiData.establishmentDate) || '';
  form.mainBusiness = apiData.mainBusiness || '';
  form.rentalArea = apiData.rentalArea?.toString() || '';
  form.leaseTerm = apiData.rentalPeriod?.toString() || '';
  form.locationRequirement = apiData.locationRequirement || '';
  form.otherRequirements = apiData.otherRequirement || '';
  form.projectDescription = apiData.projectIntroduction || '';
  form.competitiveAnalysis = apiData.competitiveAdvantage || '';
  form.marketAnalysis = apiData.marketProspects || '';
  form.energyConsumption = apiData.energyConsumption || '';
  form.pollution = apiData.pollution || '';
  form.noise = apiData.noise || '';
  form.otherConditions = apiData.otherConditions || '';
  form.parkOpinion = apiData.approvalOpinion || '';
  form.remarks = apiData.remarks || '';

  // 2. 需要转换的字段 - 企业性质
  if (apiData.region) {
    // 新成立企业表单中企业性质是单选，转换为数组格式
    form.enterpriseType = [apiData.region];
  } else {
    form.enterpriseType = [];
  }

  // 行业字段处理
  if (apiData.industry) {
    // 新成立企业表单中行业是单选，转换为数组格式
    form.industry = [apiData.industry];
    if (apiData.industry === '其他') {
      form.otherIndustry = apiData.otherIndustry || '';
    }
  } else {
    form.industry = [];
  }

  // 入园业务字段处理
  if (apiData.businessType && Array.isArray(apiData.businessType)) {
    form.businessScope = apiData.businessType;
    if (apiData.businessType.includes('其他')) {
      form.otherBusinessScope = apiData.otherBusinessType || '';
    }
  } else {
    form.businessScope = [];
  }

  // 3. 数组结构的映射
  // 股东信息
  if (apiData.shareholders && Array.isArray(apiData.shareholders)) {
    form.shareholders = apiData.shareholders.map((apiItem: any, index: number) => ({
      name: apiItem.name || '',
      ratio: apiItem.ratio || '',
      type: apiItem.nature || ''
    }));
    // 如果股东数量不足，用空对象填充
    while (form.shareholders.length < 9) {
      form.shareholders.push({ name: '', ratio: '', type: '' });
    }
  }

  // 关键人才
  if (apiData.members && Array.isArray(apiData.members)) {
    form.keyPersonnel = apiData.members.map((apiItem: any, index: number) => ({
      name: apiItem.name || '',
      birthDate: formatDate(apiItem.birthDate) || '',
      position: apiItem.job || '',
      graduation: apiItem.school || '',
      title: apiItem.title || '',
      education: apiItem.education || '',
      major: apiItem.major || ''
    }));
    // 如果人员数量不足，用空对象填充
    while (form.keyPersonnel.length < 7) {
      form.keyPersonnel.push({ name: '', birthDate: '', position: '', graduation: '', title: '', education: '', major: '' });
    }
  }

  // 知识产权
  if (apiData.intellectualProperties && Array.isArray(apiData.intellectualProperties)) {
    form.intellectualProperties = apiData.intellectualProperties.map((apiItem: any, index: number) => {
      // 知识产权类别映射
      const typeMapping: { [key: string]: string } = {
        'patent': '专利',
        'trademark': '商标',
        'copyright': '著作权'
      };

      const mappedType = typeMapping[apiItem.type] || apiItem.type || '';
      return {
        name: apiItem.name || '',
        type: mappedType, // 映射类别
        applicationDate: formatDate(apiItem.applicationDate) || '',
        approvalDate: formatDate(apiItem.approvalDate) || ''
      };
    });
    // 如果知识产权数量不足，用空对象填充
    while (form.intellectualProperties.length < 6) {
      form.intellectualProperties.push({ name: '', type: '', applicationDate: '', approvalDate: '' });
    }
  }

  // 4. 特殊字段处理
  form.parkOpinionDate = formatDate(apiData.approvalDate) || '';

};

const getEnterpriseDetail = async (id: any) => {
  try {

    // 确保ID是BigInt类型
    let bigIntId;
    try {
      bigIntId = BigInt(id);
    } catch (error) {
      console.error('错误：ID无法转换为BigInt: ' + error);
      return;
    }
    // 修改API调用，传递BigInt ID
    const res = await getEnterpriseApplicationDetail(bigIntId) as unknown as AjaxResult<any>;

    if (res.code === 200) {
      // 调用填充表单的函数
      fillForm(res.data);
    } else {
      console.error('API返回错误:', res.msg);
      ElMessage.error(res.msg || '获取企业详情失败');
    }
  } catch (error) {
    console.error('获取企业详情失败: ' + error);
    ElMessage.error('获取企业详情失败');
  }
};

// 打印功能
const printForm = () => {
  window.print();
};


// 组件挂载时获取数据
onMounted(() => {
  const id = route.query.id;
  if (id) {
    getEnterpriseDetail(id);
    nextTick(() => {
      setTimeout(() => {
        window.print();
      }, 500);
    });
  } else {
    ElMessage.warning('缺少企业ID参数');
  }
});

// 将时间格式化函数 (统一转换为 YYYY 年 MM 月 DD 日 格式)
const formatDate = (dateString: string | null | undefined): string => {
  if (!dateString) return '';

  try {
    const date = new Date(dateString);
    if (isNaN(date.getTime())) return dateString; // 无效日期，直接返回原数据

    const year = date.getFullYear();
    const month = (date.getMonth() + 1).toString().length === 1 ? '0' + (date.getMonth() + 1).toString() : (date.getMonth() + 1).toString();
    const day = date.getDate().toString().length === 1 ? '0' + date.getDate().toString() : date.getDate().toString();

    return `${year}年${month}月${day}日`;
  } catch (e) {
    console.warn('日期格式转换失败:', dateString, e);
    return '';
  }
};
</script>

<style scoped lang="scss">
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Microsoft YaHei", Arial, sans-serif;
}
body {
  padding: 20px;
  background-color: #f5f5f5;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.header {
  text-align: center;
  margin-bottom: 20px;
}
.header h1 {
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 10px;
  letter-spacing: 2px;
}
.header h2 {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 15px;
  letter-spacing: 1px;
}
.subtitle-container {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
  margin-bottom: 20px !important;
  min-height: 30px !important;
  position: relative !important;
  page-break-inside: avoid;
}
.subtitle-left {
  display: flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  position: relative !important;
}
.subtitle-right {
  flex: 0 0 auto !important;
  text-align: right !important;
  position: relative !important;
  white-space: nowrap !important;
}
.date-display {
  font-size: 14px;
  margin-left: 5px;
}

.show-a-line {
  display: flex;
  align-items: center; /* 垂直居中对齐 */
}
.enterprise-name {
  display: flex;
  align-items: center; /* 垂直居中对齐 */
}

.enterprise-name textarea {
  flex: 1; /* 让<textarea>占据剩余空间 */
  margin-left: 8px; /* 添加一些左边距 */
}

.el-radio__inner {
  background-color: black;
  border-color: black ;
}
.container {
  max-width: 1200px;
  margin: 0 auto;
  background-color: white;
  padding: 30px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  position: relative;
}

.watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
  font-size: 80px;
  color: rgba(0, 0, 0, 0.05);
  z-index: -1;
  font-weight: bold;
  text-transform: uppercase;
}

table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 14px;
  margin-bottom: 20px;
  min-width: 1000px;
  border: 1px solid #000;
}

td {
  border: 1px solid #000;
  height: 30px;
  padding: 4px 6px;
  vertical-align: top;
  word-break: break-all;
}

/* 强制表格边框完整 */
table, table tr, table td {
  border: 1px solid #000 !important;
}

table tr:last-child td {
  border-bottom: 1px solid #000 !important;
}

table td:last-child {
  border-right: 1px solid #000 !important;
}

table tr:first-child td {
  border-top: 1px solid #000 !important;
}

table td:first-child {
  border-left: 1px solid #000 !important;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.text-bold {
  font-weight: bold;
}
.title-cell {
  font-weight: bold;
  text-align: center;
}
.vertical-text {
  writing-mode: vertical-lr;
  text-align: center;
  margin: 0 auto;
  letter-spacing: 8px;
}
.checkbox-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.checkbox-item {
  display: flex;
  align-items: center;
  margin-right: 10px;
  white-space: nowrap;
  user-select: none;
}
.checkbox-item.disabled {
  cursor: default;
}
.checkbox-item.disabled:hover {
  background-color: transparent;
}
.checkbox {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 1px solid #000;
  margin-right: 4px;
  text-align: center;
  line-height: 12px;
  font-size: 10px;
  font-weight: bold;
  color: transparent;
  position: relative;
}
.checkbox.checked {
  color: #000;
  background-color: #fff;
}
.checkbox-label {
  font-size: 14px;
  margin-left: 2px;
}
.readonly-text {
  display: inline-block;
  width: 100%;
  min-height: 20px;
  line-height: 20px;
  font-size: 14px;
  word-break: break-all;
  white-space: normal;
}
.readonly-textarea {
  display: block;
  width: 100%;
  min-height: 60px;
  line-height: 1.4;
  font-size: 14px;
  word-break: break-word;
  white-space: pre-wrap;
}
.tip-box {
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  padding: 15px;
  margin-top: 20px;
  font-size: 14px;
  line-height: 1.6;
}
.tip-box p {
  margin-bottom: 10px;
}
.signature {
  text-align: right;
  padding-right: 20px;
  margin-top: 20px;
}
.print-controls {
  text-align: center;
  margin: 20px 0;
  padding: 15px;
  background: #e9f7fe;
  border-radius: 5px;
}
.print-btn {
  background: #1e88e5;
  color: white;
  border: none;
  padding: 10px 25px;
  font-size: 16px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.3s;
  margin-bottom: 10px;
}
.print-btn:hover {
  background: #0d47a1;
}
.print-tip {
  margin-top: 10px;
  color: #d32f2f;
  font-size: 14px;
}
@media print {
  body {
    padding: 0;
    background: none;
    margin: 0;
  }
  .container {
    box-shadow: none;
    padding: 0;
    max-width: 100%;
    margin: 0;
    overflow: visible !important;
    width: 100% !important;
  }
  .print-controls {
    display: none;
  }
  .watermark {
    display: none;
  }
  .subtitle-container {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    margin-bottom: 20px !important;
    page-break-inside: avoid;
  }
  .subtitle-left {
    display: flex !important;
    align-items: center !important;
    flex: 1 !important;
  }
  .subtitle-right {
    text-align: right !important;
    flex: 1 !important;
  }

  /* 表格打印样式 */
  table {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
    page-break-inside: auto !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    font-size: 10px !important;
    margin-bottom: 10px !important;
    border: 1px solid #000 !important;
    overflow: visible !important;
  }

  /* 确保表格在纵向打印时完整显示 */
  @page {
    size: A4 portrait;
    margin: 0.8cm;
  }

  /* 调整列宽以适应纵向打印 - 不使用缩放 */
  colgroup col {
    width: auto !important;
  }

  /* 重新定义列宽比例 - 确保总和为100% */
  colgroup col:nth-child(1) { width: 8% !important; }
  colgroup col:nth-child(2) { width: 6% !important; }
  colgroup col:nth-child(3) { width: 3% !important; }
  colgroup col:nth-child(4) { width: 2% !important; }
  colgroup col:nth-child(5) { width: 3% !important; }
  colgroup col:nth-child(6) { width: 3% !important; }
  colgroup col:nth-child(7) { width: 3% !important; }
  colgroup col:nth-child(8) { width: 5% !important; }
  colgroup col:nth-child(9) { width: 3% !important; }
  colgroup col:nth-child(10) { width: 2% !important; }
  colgroup col:nth-child(11) { width: 2% !important; }
  colgroup col:nth-child(12) { width: 2% !important; }
  colgroup col:nth-child(13) { width: 3% !important; }
  colgroup col:nth-child(14) { width: 4% !important; }
  colgroup col:nth-child(15) { width: 2% !important; }
  colgroup col:nth-child(16) { width: 2% !important; }
  colgroup col:nth-child(17) { width: 5% !important; }
  colgroup col:nth-child(18) { width: 2% !important; }
  colgroup col:nth-child(19) { width: 3% !important; }
  colgroup col:nth-child(20) { width: 2% !important; }
  colgroup col:nth-child(21) { width: 5% !important; }
  colgroup col:nth-child(22) { width: 8% !important; }

  /* 确保所有单元格都有边框 */
  td {
    border: 1px solid #000 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    page-break-inside: avoid !important;
    padding: 1px 2px !important;
    vertical-align: middle !important;
    font-size: 10px !important;
    line-height: 1.1 !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }

  /* 强制表格边框 */
  table, table tr, table td {
    border: 1px solid #000 !important;
  }

  /* 确保最右边的边框 */
  table td:last-child {
    border-right: 1px solid #000 !important;
  }

  /* 确保最下面的边框 */
  table tr:last-child td {
    border-bottom: 1px solid #000 !important;
  }

  /* 确保输入框在打印时正确显示 */
  input[type="text"],
  input[type="date"],
  textarea {
    border: none !important;
    background: transparent !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    font-size: 12px !important;
  }

  /* 调整标题字体大小 */
  .header h1 {
    font-size: 18px !important;
    margin-bottom: 8px !important;
  }
  .header h2 {
    font-size: 16px !important;
    margin-bottom: 12px !important;
  }

  /* 调整复选框大小 */
  .checkbox {
    width: 12px !important;
    height: 12px !important;
    line-height: 10px !important;
    font-size: 8px !important;
  }

  .checkbox-label {
    font-size: 12px !important;
  }

  /* 调整垂直文字 */
  .vertical-text {
    font-size: 12px !important;
    letter-spacing: 4px !important;
  }

  /* 调整提示框 */
  .tip-box {
    font-size: 12px !important;
    padding: 10px !important;
    margin-top: 10px !important;
  }

  /* 强制表格不换页 */
  tr {
    page-break-inside: avoid !important;
  }

  /* 调整表格列宽 */
  colgroup col {
    width: auto !important;
  }
}
</style>
